@extends('home.layout')

@section('title',$title)

 

@section('content')
		<link rel="stylesheet" href="{{asset('/home/css/index-cate.css')}}">
		<!-- 页面主体开始 -->

		<!--  广告图片开始 -->
        <!-- <div class="banner">
        	<div class="img_bg">
        		<img src="{{ asset('/home/img/9288694917046480.jpg') }}" alt="">
        		<div class="banner_box">
        			<img src="{{ asset('/home/img/9570169893822672.png') }}" alt="">
        		</div>
        	</div>
        </div> -->
		
	 	<!-- 背景图宽2120  缩放为1920 -->
<!-- 分类列表 -->
			<table >
				<tr class="fbj">
					<td class = "bj" >
					<a href = "#" class = "sp"><b style="background-color:#008842">全部商品分类▼</b></a>
					</td>
				</tr>
			</table>
			<div class="index">
				<div class="you1">
					<div class="zh" name="1"><!-- 一级列表整行-->
						<div class="lb" ><div class="bg1"><div class="bg11"></div></div><a href="http://uguozi.com/home/cate/zpage/1" class="lb1">进口水果</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="2"><!-- 一级列表整行-->
						<div class="lb" ><div class="bg1"><div class="bg12"></div></div><a href="http://uguozi.com/home/cate/zpage/2" class="lb1">国产水果</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="3"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg13"></div></div><a href="http://uguozi.com/home/cate/zpage/3" class="lb1">精选肉类</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="4"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg14"></div></div><a href="http://uguozi.com/home/cate/zpage/4" class="lb1">禽类蛋品</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="5"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg15"></div></div><a href="http://uguozi.com/home/cate/zpage/5" class="lb1">海鲜水产</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="6"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg16"></div></div><a href="http://uguozi.com/home/cate/zpage/6" class="lb1">乳品糕点</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="7"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg17"></div></div><a href="http://uguozi.com/home/cate/zpage/7" class="lb1">新鲜蔬菜</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="8"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg18"></div></div><a href="http://uguozi.com/home/cate/zpage/8" class="lb1">方便速食</a></div>
						<div class="lb11"> > </div>
					</div>
					<div class="zh" name="9"><!-- 一级列表整行-->
						<div class="lb"><div class="bg1"><div class="bg19"></div></div><a href="http://uguozi.com/home/cate/zpage/9" class="lb1">粮油杂货</a></div>
						<div class="lb11"> > </div>
					</div>

					
				</div>
				
					<div class="you2">
						<h4 class="slb1"><a href="#" class="slb11">进口水果</a></h4>
						<div class="slb2" >
							<div class="slb21" id="abce" >
								<a href="http://uguozi.com/home/cate/zpage/1" class="zl">奇异果</a>&nbsp&nbsp&nbsp
								
							</div>	
						</div>
						<div class="you">
							<a href="#" class="you12"><img class="you11" src="/home/img/shuiguo.png"></a>
						</div>	
				</div>
				
			</div>
			<!-- ajax刷新分类列表 -->
			
			<script type = "text/javascript">
				$.ajaxSetup({
			        headers: {
			            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			        }
				});

				

			</script>

        <!-- 轮播图 -->
		<div class="banner">
			<div class="img_div">
	        	<div class="img_bg">
	        		<ul>
			    		<li>
			    			<a href="">
				        		<img class="aimg" src="{{ asset('/home/img/9288695010631893.jpg') }}" alt="">
				        		<div class="banner_box">
				        			<img class="bimg"  src="{{ asset('/home/img/9570169893822672.png') }}" alt="">
				        		</div>
			        		</a>
			    		</li>
			    		<li style="display: none;">
			    			<a href="">
			        			<img class="aimg" src="{{ asset('/home/img/9288695056310486.jpg') }}" alt="">
				        		<div class="banner_box">
				        			<img class="bimg"  src="{{ asset('/home/img/9570170033086678.png') }}" alt="">
				        		</div>
			        		</a>
			    		</li>
			    		<li style="display: none;">
							<a href="">
				        		<img class="aimg" src="{{ asset('/home/img/9288694871859407.jpg') }}" alt="">
				        		<div class="banner_box">
				        			<img class="bimg"  src="{{ asset('/home/img/9570169848635599.png') }}" alt="">
				        		</div>
				        	</a>	
			    		</li>
			    		<li style="display: none;">
							<a href="">
				        		<img class="aimg" src="{{ asset('/home/img/9288694562955454.jpg') }}" alt="">
				        		<div class="banner_box">
				        			<img class="bimg"  src="{{ asset('/home/img/9570169539600574.png') }}" alt="">
				        		</div>
				        	</a>
			    		</li>
					</ul>
	        	</div>

	        	<div class="img_btn">
	        		<ul>
	        			<li>1</li>
	        			<li>2</li>
	        			<li>3</li>
	        			<li>4</li>
	        		</ul>
	        	</div>

	        	<div class="img_next">
	        		<div class="prev"></div>
	        		<div class="next"></div>
	        	</div>
        	</div>
        </div>


		<script type="text/javascript">
		var inte = null;
		function run()
		{
			// 定时换图
			var i = 0;
			inte = setInterval(function(){
				
				$('.img_bg ul li').css('display','none');
				$('.img_bg ul li:eq('+i+')').css('display','block');

				$('.img_btn ul li').removeClass('on');
				$('.img_btn ul li:eq('+i+')').addClass('on');

					// 里图缩放
					var aimg = $('.img_bg ul li:eq('+i+') .aimg');
					$('.img_bg ul li .aimg').css({width:'2120px',height:'552px',left:"0px",top:"0px"});
					aimg.stop().animate({height:'500px',width:'1920px',left:"+100px",top:"+26px"},3000);

					// 外图淡入
					var bimg = $('.img_bg ul li:eq('+i+') .banner_box');
					$('.img_bg ul li .banner_box').css('opacity','0.4');
					bimg.stop(true,'gotoEnd').fadeTo(3000,1);

				i++;
				if(i > 3)
				{
					i = 0;
				}
				
			},3000);

		}

		 $('.img_btn ul li').on('mouseover',function()
        {
            var num = $(this).html() - 1;
            $('.img_btn ul li').removeClass('on');
			$('.img_btn ul li:eq('+ num +')').addClass('on');

            clearInterval(inte);

        }).on('mouseout',function(){
            run();
        });

		// 程序入口
		run();

		</script>








        <div class="ad_item">
        	<ul>
        		<li><img src="{{ asset('/home/img/9288692687806563.jpg') }}" alt=""></li>
        		<li><img src="{{ asset('/home/img/9288692890443886.jpg') }}" alt=""></li>
        		<li><img src="{{ asset('/home/img/9288692688003171.jpg') }}" alt=""></li>
        		<li><img src="{{ asset('/home/img/9288692688068707.jpg') }}" alt=""></li>
        	</ul>
        </div>
        <script type="text/javascript">
        	$('.ad_item ul li img').on('mouseover',function(){
        		$(this).css('box-shadow','0 0 5px 2px #A7A7A7');
        	}).on('mouseout',function(){
        		$(this).css('box-shadow','none');
        	});
        </script>
       <!--  广告图片结束 -->

       <!-- 楼层开始 -->
		<div class="floor f1">
			<div class="floor_title">
				<h3><a href=""><span>F1</span></a><span>进口水果</span></h3>
				<b>
					<a href="">进口苹果</a><span>|</span>
					<a href="">佳沛专区</a><span>|</span>
					<a href="">泰国鲜果</a>
				</b>
			</div>
			<div class="floor_con">
				<div class="floor_left">
					<a href=""><img src="{{ asset('/home/img/9288694530646203.jpg') }}" alt=""></a>
				</div>
				<div class="floor_right floor_move">
					<ul>
						<li><a href=""><img src="{{ asset('/home/img/9288694350028980.jpg') }}" alt=""></a></li>
						<li><a href=""><img src="{{ asset('/home/img/9288694906167504.jpg') }}" alt=""></a></li>
						<li class="wide"><a href=""><img src="{{ asset('/home/img/9288694896697552.jpg') }}" alt=""></a></li>	
						<li class="wide"><a href=""><img src="{{ asset('/home/img/9288694945489105.jpg') }}" alt=""></a></li>	
						<li><a href=""><img src="{{ asset('/home/img/9288694987432148.jpg') }}" alt=""></a></li>	
						<li><a href=""><img src="{{ asset('/home/img/9288694987497684.jpg') }}" alt=""></a></li>	
					</ul>
				</div>
			</div>
		</div>

		<!-- 第二种格式 -->
		<div class="floor f5">
			<div class="floor_title">
				<h3><a href=""><span>F5</span></a><span>精选肉类</span></h3>
				<b>
					<a href="">欧洲天然猪</a><span>|</span>
					<a href="">澳洲牛肉</a><span>|</span>
					<a href="">肉类制品</a>
				</b>
			</div>
			<div class="floor_con">
				<div class="floor_left">
					<a href=""><img src="{{ asset('/home/img/9288694598148287.jpg') }}" alt=""></a>
				</div>
				<div class="floor_right floor_move">
					<ul>
						<li class="long"><a href=""><img src="{{ asset('/home/img/9288694598082751.jpg') }}" alt=""></a></li>
						<li><a href=""><img src="{{ asset('/home/img/9288694791151820.jpg') }}" alt=""></a></li>
						<li><a href=""><img src="{{ asset('/home/img/9288694645760194.jpg') }}" alt=""></a></li>	
						<li><a href=""><img src="{{ asset('/home/img/9288694630719682.jpg') }}" alt=""></a></li>	
						<li><a href=""><img src="{{ asset('/home/img/9288694645694658.jpg') }}" alt=""></a></li>	
						<li class="wide">
						@foreach($data as $v)
							<a href="http://uguozi.com/home/cate/brand/{{$v -> name}}"><img src="{{ asset($v -> logo) }}" alt=""></a>
							
						@endforeach
						</li>	
					</ul>
				</div>
				<div class="floor_side floor_move">
					<a href=""><img src="{{ asset('/home/img/9288694941884625.jpg') }}" alt=""></a>
				</div>
			</div>
		</div>
		<script type="text/javascript">

			$('.floor .floor_con .floor_move img').on('mouseover', function(){
				 $(this).animate({ left: "+=5" }, 100);
			}).on('mouseout',function(){
				$(this).animate({ left: "-=5" }, 100);
			});

		</script>	
       <!-- 楼层结束 -->

        <!-- 页面主体结束 -->
@endsection





<!-- <link rel="stylesheet" href="{{asset('/home/css/z-page.css')}}"> -->